<template>
  <a-modal
    v-model="show"
    title="修改密码"
    width="800px"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleClose"
  >
    <div class="deal-detail">
      <a-spin tip="Loading..." :spinning="loading">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="原密码：" prop="oldPwd">
            <a-input
              v-model.trim="form.oldPwd"
              placeholder="请输入原密码"
              :maxLength="16"
              type="password"
            >
            </a-input>
          </a-form-model-item>

          <a-form-model-item label="新密码：" prop="newPwd">
            <a-input
              v-model.trim="form.newPwd"
              placeholder="请输入新密码"
              :minLength="8"
              :maxLength="16"
            >
            </a-input>
          </a-form-model-item>
          <div class="row-tip">
            <a-row class="row-item">
              <a-col :offset="labelCol.span">· 字母+数字+符号组合</a-col>
            </a-row>
            <a-row class="row-item">
              <a-col :offset="labelCol.span">· 长度为8-16个字符</a-col>
            </a-row>
            <a-row class="row-item">
              <a-col :offset="labelCol.span"> · 不允许有空格、中文</a-col>
            </a-row>
          </div>

          <a-form-model-item label="确认密码：" prop="repeatPwd">
            <a-input
              v-model.trim="form.repeatPwd"
              placeholder="请再次输入新密码"
              :minLength="8"
              :maxLength="16"
            >
            </a-input>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import loginApi from "@/api/login";
import { RE_PASSWORD } from "@/utils";
import md5 from "js-md5";

export default {
  data() {
    let checkRepeatPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else {
        if (this.form.repeatPwd !== this.form.newPwd) {
          callback(new Error("两次输入密码不一致"));
        } else if (!RE_PASSWORD.test(this.form.repeatPwd)) {
          callback(new Error("请输入正确的密码格式"));
        } else {
          callback();
        }
      }
    };

    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      loading: false,
      form: {
        oldPwd: "",
        newPwd: "",
        repeatPwd: ""
      },
      rules: {
        oldPwd: [
          { required: true, message: "请输入原密码", trigger: "change" }
        ],
        newPwd: [
          { required: true, message: "请输入新密码", trigger: "change" },
          {
            pattern: RE_PASSWORD,
            message: "请输入正确的密码格式",
            trigger: "change"
          }
        ],
        repeatPwd: [
          { required: true, validator: checkRepeatPwd, trigger: "change" }
        ]
      }
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          loginApi
            .modifyPwd({
              newPwd: md5(this.form.newPwd),
              oldPwd: md5(this.form.oldPwd)
            })
            .then((res) => {
              this.loading = false;
              if (res.retcode === 0) {
                this.$message.success("密码修改成功！");
                this.handleClose();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error(err.msg);
            });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit("cancel", false);
    }
  }
};
</script>

<style lang="less" scoped>
.deal-detail {
  min-height: 180px;
  padding: 0 80px;
  .row-tip {
    margin-bottom: 22px;
    .row-item {
      height: 26px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 26px;
    }
  }
}
</style>
